<template>
  <div class="article" v-if="model">
    <!-- 顶部导航 -->
    <nav-bar></nav-bar>
    <div class="video">
      <video controls :src="model.content"></video>
    </div>
    <div class="article_title">
      <span>{{model.category.title}}</span>
      <span>{{model.name}}</span>
    </div>
    <div class="article_detail">
      <span>{{model.userinfo.name}}</span>
      <span>146.4万次观看</span>
      <span>5281弹幕</span>
      <span>{{model.date}}</span>
    </div>
    <div class="toolbar">
      <p @click="collectArticle" :class="{active_color: isColActive}"><i class="icon-star-full"></i> <span>收藏</span></p>
      <p @click="subscribeAuthor" :class="{active_color: isSubActive}"><i class="icon-heart"></i> <span>关注</span></p>
      <p><i class="icon-redo2"></i> <span>分享</span></p>
    </div>
    <!-- 展示推荐内容 -->
    <div class="detail_parent">
      <cover class="detail_item" v-for="(item) in commendList" :key="item.id" :detailitem="item" />
    </div>
    <!-- 评论区 -->
    <comment-title :commentTotal="total" @publishComment="postComment" ref="compComTitle" />
    <comment @commentLength="len => total = len" @replyClick="replyClick" ref="compCom" />
  </div>
</template>

<script>
import NavBar from '../components/common/NavBar.vue'
import Cover from './Cover.vue'
import CommentTitle from '../components/article/CommentTitle.vue'
import Comment from '../components/article/comment.vue'
export default {
  data () {
    return {
      model: null,
      commendList: null,
      total: 0,
      postCommentData: {
        comment_content: '',
        comment_date: '',
        parent_id: null,
        article_id: null
      },
      isColActive: null,
      isSubActive: null
    }
  },
  created () {
    this.getArticle()
    this.getCommend()
    this.getInitCollection()
  },
  methods: {
    // 发送请求 获取文章信息
    async getArticle () {
      // console.log(this.$route)
      const res = await this.$http.get('/article/' + this.$route.params.id)
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('获取文章数据失败')
      this.model = res.data[0]
      if (this.model) {
        this.getInitSubscribe()
      }
    },
    // 获取推荐文章列表
    async getCommend () {
      const res = await this.$http.get('/commend')
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('获取推荐文章失败')
      this.commendList = res.data
    },
    // 发送评论
    async postComment (content) {
      // 评论的内容
      this.postCommentData.comment_content = content
      // 评论日期
      const date = new Date()
      let m = date.getMonth() + 1
      let d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      this.postCommentData.comment_date = `${m}-${d}`
      // 文章id
      this.postCommentData.article_id = this.$route.params.id
      // 发送请求
      const res = await this.$http.post('/comment_post/' + localStorage.getItem('id'), this.postCommentData)
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('评论发表失败')
      this.$msg.success('评论发表成功')
      // 刷新视图-在子组件中重新获取评论数据
      this.$refs.compCom.getCommentData()
      // 清空parent_id
      this.postCommentData.parent_id = null
    },
    replyClick (id) {
      this.postCommentData.parent_id = id
      // console.log(this.postCommentData.parent_id)
      // 让子组件中的评论输入框获取焦点
      this.$refs.compComTitle.focusIpt()
    },
    // 点击收藏文章
    async collectArticle () {
      if (localStorage.getItem('token')) {
        const res = await this.$http.post('/collection/' + localStorage.getItem('id'), {
          article_id: this.$route.params.id
        })
        // console.log(res)
        if (res.data.msg === '收藏成功') {
          this.isColActive = true
        } else {
          this.isColActive = false
        }
        this.$msg.success(res.data.msg)
      }
    },
    // 获取收藏文章初始状态
    async getInitCollection () {
      if (localStorage.getItem('token')) {
        const res = await this.$http.get('/collection/' + localStorage.getItem('id'), {
          params: {
            article_id: this.$route.params.id
          }
        })
        // console.log(res)
        this.isColActive = res.data.success
      }
    },
    // 点击关注发帖用户
    async subscribeAuthor () {
      if (localStorage.getItem('token')) {
        const res = await this.$http.post('/sub_scription/' + localStorage.getItem('id'), {
          sub_id: this.model.userid
        })
        // console.log(res)
        if (res.data.msg === '关注成功') {
          this.isSubActive = true
        } else {
          this.isSubActive = false
        }
        this.$msg.success(res.data.msg)
      }
    },
    // 获取关注初始状态
    async getInitSubscribe () {
      if (localStorage.getItem('token')) {
        const res = await this.$http.get('/sub_scription/' + localStorage.getItem('id'), {
          params: {
            sub_id: this.model.userid
          }
        })
        // console.log(res)
        this.isSubActive = res.data.success
      }
    }
  },
  watch: {
    // 监听路由变化
    $route () {
      // console.log('路由变化了')
      this.getArticle()
      this.getCommend()
    }
  },
  components: {
    NavBar,
    Cover,
    CommentTitle,
    Comment
  }
}
</script>

<style lang="less" scoped>
.article {
  background-color: #fff;
}
.video {
  width: 100%;
  video {
      width: 100%;
  }
}

.article_title {
  font-size: 15px;
  padding: 1.389vw;
  span:nth-child(1) {
    background: #f4f4f4;
    font-size: 13px;
    color: #fb7299;
    padding: 0 10px;
    border-radius: 10px;
    display: inline-block;
  }
}

.article_detail {
    padding: 0 10px;
    font-size: 3.2vw;
    margin-top: 2.13333vw;
    color: #999;
    span:nth-child(1) {
      color: #212121;
      margin-right: 20px;
    }
    span:nth-child(2), span:nth-child(3) {
      margin-right: 10px;
    }
}

.toolbar {
  padding: 10px 10px;
  color: #999;
  font-size: 13px;
  p {
    display: inline-block;
    margin-right: 20px;
    i {
      font-size: 17px;
      // color: #666;
    }
  }
  p.active_color {
    color: #fb7299;
  }
}

.detail_parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin: 2.778vw 0;
  .detail_item {
    width: 45%;
  }
}
</style>
